<template>
  <div class="w-toolbar" :class="classes" :style="styles">
    <slot></slot>
  </div>
</template>

<script>
import { computed } from "vue";
export default {
  name: "w-toolbar",

  props: {
    color: { type: String },
    bgColor: { type: String },
    absolute: { type: Boolean },
    fixed: { type: Boolean },
    bottom: { type: Boolean },
    height: { type: [Number, String], default: null },
    noBorder: { type: Boolean },
    shadow: { type: Boolean }
  },

  emits: [],
  setup(props, ctx) {
    const toolbarHeight = computed(() => {
      const h = props.height;
      // If a number is passed without units, append `px`.
      return h && parseInt(h) == h ? h + "px" : h;
    });
    const classes = computed(() => {
      return {
        [props.color]: !!props.color,
        [`${props.bgColor}--bg`]: !!props.bgColor,
        "w-toolbar--absolute": !!props.absolute,
        "w-toolbar--fixed": !!props.fixed,
        [`w-toolbar--${props.bottom ? "bottom" : "top"}`]: true,
        "w-toolbar--no-border": props.noBorder,
        "w-toolbar--shadow": !!props.shadow
      };
    });
    const styles = computed(() => {
      return props.height ? `height: ${toolbarHeight.value}` : false;
    });
    return {
      toolbarHeight,
      classes,
      styles
    };
  }

};
</script>
